<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            min-width: 1060px;
            background: #fff;
        }

        body {
            width: 100%;
            max-width: 2560px;
            margin: 0 auto;
            background: #ccc;
            overflow: hidden;
        }

        canvas {
            object-fit: cover;
        }
    </style>
</head>

<body>
    <script>

        // 创建画布

        const canvasElem = document.createElement('canvas')

        // 缓存画布，双缓存解决高频刷新时的画面闪烁问题
        const tempCanvas = document.createElement('canvas')

        document.body.append(canvasElem)

        const ctx = canvasElem.getContext('2d')
        const tempCtx = tempCanvas.getContext('2d')


        // 设置画布大小
        // 依据：b站主页缩放至50%时，Banner显示的最大值
        const canvasSize = {
            w: 2560,
            h: 240
        }

        canvasElem.setAttribute('width', canvasSize.w)
        canvasElem.setAttribute('height', canvasSize.h)

        tempCanvas.width = canvasSize.w, tempCanvas.height = canvasSize.h


        // 设置填充样式为红色
        ctx.fillStyle = '#7bc6fc';
        // 填充整个 Canvas 画布
        ctx.fillRect(0, 0, 2560, 240);

        // 视频
        // 309.677px 774.194px
        // 167.226px 418.065px
        // 200 500


        const bubble1 = videoNode('./src/528d9376-f0fd-4445-9840-13e7559d6056.webm', {
            playbackRate: 3
        })
        const bubble2 = videoNode('./src/528d9376-f0fd-4445-9840-13e7559d6056.webm', {
            playbackRate: 1.5
        })

        function videoNode(vidSrc, options = {}) {
            const video = document.createElement('video')
            document.body.append(video)

            video.src = vidSrc
            video.muted = true
            video.loop = true
            video.autoplay = true
            video.style.opacity = 0
            video.style.position = 'absolute'

            for (let k in options) {
                video[k] = options[k]
            }

            return video
        }

        // 页面大小变更时触发
        function winResize() {

            const widthOffset = window.innerWidth - canvasSize.w

            if (widthOffset < 0) {
                canvasElem.style.marginLeft = widthOffset / 2 + 'px'
            } else {
                canvasElem.style.margin = '0 auto'
            }
        }

        fetch('./src/base.json')
            .then(res => res.text())
            .then(data => {
                // console.log(JSON.parse(data));

                draw(JSON.parse(data), 100)
            })


        const imgList = []


        const scaleFactor = 0.8
        function draw(imgSet, duration = null) {
            // ctx.fillStyle = '#fff'
            // ctx.fillRect(0, 0, canvasElem.width, canvasElem.height)

            // tempCtx.clearRect(0, 0, canvasElem.width, canvasElem.height)
            // tempCtx.save()


            if (duration) {
                let i = 0, loadI = 0
                for (let k in imgSet) {
                    imgList[i] = new Image()
                    imgList[i].src = imgSet[k]
                    imgList[i].id = k
                    setTimeout(() => {
                        // tempCtx.globalAlpha = 0.2
                        console.log(imgList[i]);

                        imgList[i].onload = () => {
                            // 缓存
                            loadI++
                            // 75ec2d45ce8c942a1f7379d4641171da4d90ab0d.png@1c.webp
                            // cd68251cde11936871237ca94360acb451bf7ed2.png@1c.webp
                            // 

                            // 缓存
                            // if (k == 'cd68251cde11936871237ca94360acb451bf7ed2.png@1c.webp') {
                            //     tempCtx.globalAlpha = 0.5

                            // } else {
                            //     tempCtx.globalAlpha = loadI / Object.keys(imgSet).length
                            // }


                            tempCtx.drawImage(imgList[i], 0, 0, imgList[i].width * scaleFactor, imgList[i].height * scaleFactor)
                            ctx.drawImage(tempCanvas, 0, 0)
                        }
                    }, duration * i)
                    i++
                }


                setTimeout(() => draw(), 1000 / 24 + (duration * Object.keys(imgSet).length))
            } else {

                imgList.forEach((img, i) => {

                    // console.log(img.id, i);

                    tempCtx.drawImage(img, 0, 0, img.width * scaleFactor, img.height * scaleFactor)

                    if (i >= imgList.length - 1) {
                        // console.log(111);

                        // 2560 / 2 - 1083.87 - 250 / 2
                        tempCtx.drawImage(bubble1, 71, 0, bubble1.videoWidth * 0.8, bubble1.videoHeight * 0.8)
                        // 2560 / 2 + 334.452 - 250 / 2
                        tempCtx.drawImage(bubble2, 1489, 0, bubble2.videoWidth * 1.5, bubble2.videoHeight * 1.5)

                        ctx.drawImage(tempCanvas, 0, 0)

                        setTimeout(() => draw(), 1000 / 24)
                    }
                })


                /* for (let k in imgSet) {
                    const img = new Image()
                    img.src = imgSet[k]
                    img.onload = function () {

                        // 缓存
                        // if (k == 'cd68251cde11936871237ca94360acb451bf7ed2.png@1c.webp') {
                        //     tempCtx.globalAlpha = 0.5

                        // } else {
                        //     tempCtx.globalAlpha = 1
                        // }
                        // console.log(k);

                        tempCtx.drawImage(this, 0, 0, img.width * scaleFactor, img.height * scaleFactor)

                        i++
                        if (i >= Object.keys(imgSet).length) {
                            ctx.drawImage(tempCanvas, 0, 0)

                            // 2560 / 2 - 1083.87 - 250 / 2
                            ctx.drawImage(bubble1, 71, 0, bubble1.videoWidth * 0.8, bubble1.videoHeight * 0.8)
                            // 2560 / 2 + 334.452 - 250 / 2
                            ctx.drawImage(bubble2, 1489, 0, bubble2.videoWidth * 1.5, bubble2.videoHeight * 1.5)

                            // setTimeout(() => draw(imgSet), 10000 / 12)
                        }
                    }
                } */
            }
        }

        winResize()
        window.addEventListener('resize', () => {
            winResize()

            // console.log(window.innerWidth, window.innerHeight);

            // canvasElem.style.scale = window.innerWidth / canvasSize.w
            // canvasElem.style.marginLeft = '-50%'

        })

    </script>
</body>

</html>